<template>

  <div class="EchartPractice">
    <br>
    <el-row>
      <el-col :span="12">
        <div id="first-line-left" style="height: 220px;width: 500px">
        </div>
        <div id="first-left-div">
          <div class="first-left-input">
            <el-input v-model.number="pie_count" placeholder="输入50-300的数字"></el-input>
          </div>
          <el-button type="warning" @click="pie_submit(0,pie_count)">提交</el-button>
        </div>
      </el-col>


      <el-col :span="12" >
        <div id="first-line-right" style="height: 220px;width: 562px"></div>
        <div class="first-left-input">
          <el-select v-model="bar_year" placeholder="选择年份">
            <el-option
              v-for="item in bar_year_lis"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <el-button type="primary" @click="bar_submit(bar_year)">提交</el-button>
      </el-col>
    </el-row>
    <el-divider content-position="right"><span class="el-icon-sugar"></span></el-divider>

    <el-row>
      <el-col :span="16">
        <div id="second" style="width: 800px;height: 280px">
        </div>
      </el-col>
      <el-col :span="8">
        <div id="root-line-form">
          <div class="first-left-input" id="line-form">
            <el-select v-model="year" placeholder="选择年份">
              <el-option
                v-for="item in year_lis"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-button type="success" style="width: 200px" @click="line_submit">提交</el-button>
          </div>

        </div>


      </el-col>
    </el-row>

  </div>
</template>

<script>
  // 引入基本模板
  import axios from 'axios'

  let echarts = require('echarts/lib/echarts')
  // 引入柱状图组件
  require('echarts/lib/chart/bar')
  // 引入提示框和title组件
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/title')
  export default {
    name: 'LogAnalyse',
    data () {
      return {
        bar_year: 2020,
        bar_year_lis: [],
        year: 2020,
        year_lis: [],
        pie_count: '',
        line_count: '',
        bar_count: '',
        line_data: [],
        bar_data: [],
        pie_data: [],
        pie_leng: ''
      }
    },
    mounted () {
      this.firstleft()
      this.firstright()
      this.second()
    },

    methods: {
      //饼状图
      firstleft (type = 0, number = 100) {
        //获取数据
        let pie_data = this.get_pie_data(type, number)
        pie_data.then(res => {
          this.pie_data = res.data.data
          this.pie_leng = res.data.lenth
          let myChart = echarts.init(document.getElementById('first-line-left'))
          // 绘制图表
          var option = {
            title: {
              text: '告警占比',
              top: 'top',
              left: 'left',
              textStyle: {
                fontSize: 18,
                fontWeight: '800',
                color: '#333'
              },
            },
            series: [
              {
                type: 'pie',
                data: this.pie_data
              }
            ],
            color: ['#efb627', ' #f54e30', 'red'],
          }

          myChart.setOption(option)
        })
        // 基于准备好的dom，初始化echarts实例

      },
      //柱状图
      firstright (year = 2020) {
        //先拿到后端给的数据，再生成图表
        let data = this.get_bar_data(year)
        data.then(res => {
          //初始化选择的年份
          this.bar_year_lis = res.data.year
          // 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.getElementById('first-line-right'))
          let options = {
            title: { 'text': '告警数量' },
            tooltip: {
              trigger: 'axis'//鼠标在轴上就可以触发
            },
            xAxis: {
              type: 'category',
              data: res.data.mon_lis//月份
            },
            yAxis: {
              type: 'value'
            },
            series: res.data.data,//数据，
            color: ['#efb627', ' #f54e30', 'red'],

          }
          // 绘制图表
          myChart.setOption(options)
        })

      },
      //折线图，看趋势
      second (year = 2020) {
        //先拿到后端给的数据，再生成图表
        let data = this.get_line_data(year)
        data.then(res => {

          //初始化选择的年份
          this.year_lis = res.data.year
          // 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.getElementById('second'))
          let options = {
            title: { 'text': '告警走势' },
            tooltip: {
              trigger: 'axis'//鼠标在轴上就可以触发
            },
            xAxis: {
              type: 'category',
              data: res.data.mon_lis//月份
            },
            yAxis: {
              type: 'value'
            },
            series: res.data.data,//数据，
            color: ['#efb627', ' #f54e30', 'red'],

          }
          // 绘制图表
          myChart.setOption(options)
        })

      },

      //获取饼状图数据
      get_pie_data (pie = 0, number = 100) {
        return new Promise((resolve, reject) => {
          axios({
            url: this.$settings.base_url + `/user/logdata/?number=${number}&type=${pie}`,
            method: 'post'
          }).then(res => {
            resolve(res)
          }).catch(error => {
            reject(error)
          })
        })
      },
      //饼状图提交后触发
      pie_submit (pie = 0, number = 100) {
        console.log(this.pie_count, 123)
        if (Number.isInteger(number)) {
          if (number <= 300 && number >= 10) {
            this.firstleft(pie, number)
            this.$message.success('获取数据成功')
          } else {
            this.$message.error('范围需要在50-300之间')
          }
        } else {
          this.$message.error('输入的是非数字！！')
        }
      },
      //获取折线图的数据
      get_line_data (year = 2020) {

        return new Promise((resolve, reject) => {
          axios({
            url: this.$settings.base_url + `/user/logdata/?year=${year}`,
            method: 'put'
          }).then(res => {
            if (res.data.code === 404) {
              this.$message.warning('该年份没有数据！')
            }
            resolve(res)
          }).catch(error => {
            reject(error)
          })
        })
      },
      //折线图的请求
      line_submit () {
        this.second(this.year)
        this.$message.success('请求成功！')
      },
      //获取柱状图的数据
       get_bar_data (year = 2020) {

        return new Promise((resolve, reject) => {
          axios({
            url: this.$settings.base_url + `/user/logdata/?year=${year}`,
            method: 'patch'
          }).then(res => {
            if (res.data.code === 404) {
              this.$message.warning('该年份没有数据！')
            }
            resolve(res)
          }).catch(error => {
            reject(error)
          })
        })
      },
      //柱状图的请求函数
      bar_submit(year=2020){
        this.firstright(year)
        this.$message.success('请求成功')
      }
    }
  }
</script>


<style scoped>
  .first-left-input {
    display: inline-block;
    margin-right: 20px;
    color: #f80126;
  }

  #line-form {
    margin: 10px;
    width: 200px;
    height: 150px;

  }

  #root-line-form {
    width: 220px;
    height: 170px;
    border: 1px slategrey solid;
    border-radius: 10px;
    margin-top: 50px;
    margin-left: 85px;
  }

  #line-form * {
    margin-top: 20px;
  }
</style>
